Design: Model management #7190
Design: Model management #7190
Conversation
DrJKL
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:M
DrJKL
added
Design
|
Warning Rate limit exceeded@DrJKL has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 12 minutes and 23 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughUpdates adjust UI text, icons, and layout-related classes: shorten an i18n label, swap an upload icon, change asset preview scaling, refactor AssetFilterBar class and sorting types, modify filter-option rendering to buttons, and remove one initial-state test. No functional API signatures were changed except prop destructuring in one Vue component. Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/05/2025, 08:35:21 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/05/2025, 08:45:18 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
dosubot
bot
added
the
size:M
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • 🟢 -6 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 974 kB (baseline 975 kB) • 🟢 -314 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 174 kB (baseline 173 kB) • 🔴 +294 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
src/locales/en/main.json(1 hunks)src/platform/assets/components/AssetBrowserModal.vue(1 hunks)src/platform/assets/components/AssetCard.vue(1 hunks)src/platform/assets/components/AssetFilterBar.vue(3 hunks)src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue🧠 Learnings (8)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with SelectApplied to files:
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vuesrc/platform/assets/components/AssetFilterBar.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed propertiesApplied to files:
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use defineExpose only for imperative operations (such as form.validate(), modal.open())Applied to files:
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.vue : Never use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'` for class merging in Vue templatesApplied to files:
src/platform/assets/components/AssetFilterBar.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabledApplied to files:
src/platform/assets/components/AssetFilterBar.vue⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: collect
🔇 Additional comments (8)
src/locales/en/main.json (1)
2094-2094: LGTM – Simplified label improves UI compactness.The shortened label "Import" is more concise and works well within the asset browser context where it's clear that models are being imported. The button icon (folder-input) and surrounding UI provide sufficient context.
src/platform/assets/components/AssetCard.vue (1)
29-29: Improved visual consistency with object-cover.Changing from
object-containtoobject-coverensures preview images fill the card space uniformly, as mentioned in the PR objectives. This creates a cleaner grid appearance, though it may crop non-square images.src/platform/assets/components/AssetBrowserModal.vue (1)
42-42: Better semantic icon choice for file import.The
folder-inputicon more accurately represents the file import action compared topackage-plus, which implies package installation. This aligns well with the simplified "Import" label.src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue (2)
44-44: Verify the singleFilterOption condition for upload button visibility.The upload button is only displayed when
singleFilterOptionis true (i.e., when there's exactly one filter option). This seems counterintuitive – typically, import functionality would be available regardless of the number of filters. The TODO comment on line 18 suggests this logic may need refinement.Please clarify whether:
- The upload button should only appear in specific dialog contexts (e.g., model selector vs. image loader)
- This is a temporary workaround until proper dialog differentiation is implemented
- There's a UX reason to hide uploads when multiple filter options exist
2-19: Avoid destructuring props – use direct access instead.The props are destructured on line 10, which is not aligned with Vue 3.5 best practices. While it works here, direct prop access (e.g.,
props.filterOptions) is preferred to maintain reactivity tracking and consistency with the Vue 3.5 style guide mentioned in the coding guidelines.The
singleFilterOptioncomputed is correctly implemented, though the TODO comment suggests the logic for when to show the upload button may need refinement.Apply this diff to use direct prop access:
-const { filterOptions } = defineProps<{ +const props = defineProps<{ filterOptions: FilterOption[] }>() const filterSelected = defineModel<OptionId>('filterSelected') const { isUploadButtonEnabled, showUploadDialog } = useModelUpload() // TODO: Add real check to differentiate between the Model dialogs and Load Image -const singleFilterOption = computed(() => filterOptions.length === 1) +const singleFilterOption = computed(() => props.filterOptions.length === 1)Then update the template:
<button - v-for="option in filterOptions" + v-for="option in props.filterOptions"⛔ Skipped due to learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Destructure props using Vue 3.5 style in Vue componentsLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed propertiesLearnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0 Timestamp: 2025-12-04T21:43:49.343Z Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use vue 3.5 style of default prop declarationLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Vue 3.5 style of default prop declaration with defineProps<T>()Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Implement computed properties with computed()Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Implement proper props and emits definitionsLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement computed properties with computed() functionLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition APILearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing stylessrc/platform/assets/components/AssetFilterBar.vue (3)
2-45: Simplified layout with inline Tailwind classes.Replacing dynamic class bindings with static inline classes simplifies the template since no conditional class merging is needed here. This is cleaner and more maintainable for static layouts.
64-72: Excellent type-safe sort options implementation.Using a const assertion with type extraction provides compile-time safety for sort values while keeping the options centralized. Creating a mutable copy for the template is the correct approach.
80-80: Default sort order updated per PR objectives.Changing the default from
'name-asc'to'recent'aligns with the PR objective to "Order items by recent by default." The type annotation ensures only valid sort options can be used.
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
Show resolved
Hide resolved
| import MultiSelect from '@/components/input/MultiSelect.vue' | ||
| import SingleSelect from '@/components/input/SingleSelect.vue' | ||
| import type { SelectOption } from '@/components/input/types' | ||
| import { t } from '@/i18n' |
There was a problem hiding this comment.
Not related to this PR, but it's definitely a mistake that we are using @/i18n here instead of the useI18n. Basically forgoing reactivity, right?
Another thing we could add a linter rule for ("prefer reactive translations in component setup functions").
Summary
Assorted updates to the components involved in uploading personal models.
Changes
┆Issue is synchronized with this Notion page by Unito